<!doctype html>
<html>
<head>
  <title>Clip It Good: Configure options</title>
  <link rel="stylesheet" href="jquery-ui-1.8.5.custom.css" type="text/css" charset="utf-8">
  <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
  <script type="text/javascript" src="json2.js"></script>
  <script type="text/javascript" src="jquery-ui-1.8.5.custom.min.js"></script>
  <script type="text/javascript" src="chrome_ex_oauthsimple.js"></script>
  <script type="text/javascript" src="chrome_ex_oauth.js"></script>

  <style type="text/css">
    body {
      font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    }

    #about {
      max-width: 400px;
    }

    /* Pop-up album selection */
    .album-type {
      margin-bottom: 1em;
    }

    .album-list {
      height: 250px;
      overflow-y: auto;
      overflow-x: hidden;
      list-style-type: none;
      margin: 0;
      padding: 0;
      border: 1px solid #555;
    }
    .album-list .ui-selecting {
      background: #FECA40;
    }
    .album-list .ui-selected {
      background: #F39814;
      color: #FFFFFF;
    }
    .album-list li {
      margin: 0;
      padding: 5px;
      border-top: 1px solid #DDD;
      border-bottom: 1px solid #BBB;
      background-color: #EEE;
      font-size: 0.8em;
      cursor: pointer;
    }

    .album-controls {
      margin-top: 1em;
    }

    /* Connected albums view */
    .album-type-picasa {
      
    }
    .album-section-title {
      
    }
    .add-album-control {
      margin-top: 2em;
    }

    /* other */
    .security-detail {
      max-width: 400px;
    }

  </style>

  <script type="text/javascript" charset="utf-8">

  var BG = chrome.extension.getBackgroundPage();

  // Generic album listing
  function removeAlbum(albumType, albumId) {
    delete BG.ALBUM_CONFIG[albumType][albumId];
    if ($.isEmptyObject(BG.ALBUM_CONFIG[albumType])) {
      delete BG.ALBUM_CONFIG[albumType];
    }
  }

  function populateAlbumList() {
    var connectedAlbums = $('#connected-list');
    connectedAlbums.contents().remove();

    BG.loadAlbumConfig();
    if ($.isEmptyObject(BG.ALBUM_CONFIG)) {
      connectedAlbums.text('No albums connected.');
      return;
    }

    $.each(BG.ALBUM_CONFIG, function(albumType, albumIdNameDict) {
      var albumSectionTitle = $('<h3 class="album-section-title">');
      albumSectionTitle.text(BG.ALBUM_TYPE_STRING[albumType]);
      connectedAlbums.append(albumSectionTitle);

      var albumSection = $('<ul class="album-section">');
      albumSection.addClass('album-type-' + albumType);

      $.each(BG.getSortedAlbums(albumIdNameDict), function(index, albumDict) {
        var album = $('<li class="connected-album">');
        album.attr('album-id', albumDict['id']);
        album.text(albumDict['name'] + ' ');
        var removeLink = $('<a href="">').text('(Remove)');
        removeLink.click(function(event) {
          removeAlbum(albumType, albumDict['id']);
          BG.saveAlbumConfig();
          populateAlbumList();
          BG.setupMenus();

          event.preventDefault();
          return false;
        });
        album.append(removeLink);
        albumSection.append(album);
      });

      connectedAlbums.append(albumSection);
    });
  }

  // Generic album selection
  function renderAlbumSelector(albumIdToName, albumType) {
    var selectAlbumDiv = $('#select-album');
    selectAlbumDiv.children('.album-type')
        .text(BG.ALBUM_TYPE_STRING[albumType]);

    var albumList = selectAlbumDiv.children('.album-list');
    albumList.contents().remove();
    $.each(albumIdToName, function(albumId, albumName) {
      var albumEntry = $('<li>');
      albumEntry.attr('album-id', albumId);
      albumEntry.text(albumName);
      albumList.append(albumEntry);
    });
    albumList.selectable();

    selectAlbumDiv.dialog({
      modal: true,
      resizable: false,
      width: 550,
      title: 'Connect an album',
      buttons: {
        'Add': function() {
          var selectedAlbums = $('#select-album>.album-list>.ui-selected');
          $.each(selectedAlbums, function(index, item) {
            if (!BG.ALBUM_CONFIG[albumType]) {
              BG.ALBUM_CONFIG[albumType] = {};
            }
            BG.ALBUM_CONFIG[albumType][$(item).attr('album-id')] =
                $(item).text();
          });
          BG.saveAlbumConfig();
          populateAlbumList();
          BG.setupMenus();
          $(this).dialog('close');
        },
        'Cancel': function() {
          $(this).dialog('close');
        }
      }
    });
  }

  // Picasa-specific album selection
  function picasaListAlbumsDone(jsonData) {
    var albumIdToName = {};
    $.each(jsonData.feed.entry, function(index, entryData) {
      albumIdToName[entryData['gphoto$id']['$t']] = entryData.title['$t'];
    });
    renderAlbumSelector(albumIdToName, BG.PICASA);
  }

  function addPicasaAlbum() {
    BG.OAUTH.authorize(function() {
      BG.OAUTH.sendSignedRequest(
        'http://picasaweb.google.com/data/feed/api/user/default',
        function(resp, xhr) {
          if (!(xhr.status >= 200 && xhr.status <= 299)) {
            alert('Error: Response status = ' + xhr.status +
                  ', response body = "' + xhr.responseText + '"');
            return;
          }
          var jsonResponse = $.parseJSON(resp);
          picasaListAlbumsDone(jsonResponse);
        },
        {method: 'GET', parameters: {'alt': 'json'}})
    });
  }

  function addCamlistoreServer() {
    var camliServerDiv = $('#camliserver-config');

    function clearInputs() {
      camliServerDiv.find('input').val('');
    }

    camliServerDiv.dialog({
      modal: true,
      resizable: false,
      width: 550,
      title: 'Connect a Camlistore Server',
      buttons: {
        'Add': function() {
          var urlInput = $('#camliserver-url');
          var nameInput = $('#camliserver-name');
          var usernameInput = $('#camliserver-username');
          var passwordInput = $('#camliserver-password');

          if (!BG.ALBUM_CONFIG[BG.CAMLISTORE]) {
            BG.ALBUM_CONFIG[BG.CAMLISTORE] = {};
          }
          if (!BG.ALBUM_OPTIONS[BG.CAMLISTORE]) {
            BG.ALBUM_OPTIONS[BG.CAMLISTORE] = {};
          }
          var albumId = urlInput.val();
          BG.ALBUM_CONFIG[BG.CAMLISTORE][albumId] = nameInput.val();
          BG.ALBUM_OPTIONS[BG.CAMLISTORE][albumId] = {
            'username': usernameInput.val(),
            'password': passwordInput.val()
          };

          BG.saveAlbumConfig();
          populateAlbumList();
          BG.setupMenus();
          clearInputs();
          $(this).dialog('close');
        },
        'Cancel': function() {
          clearInputs();
          $(this).dialog('close');
        }
      }
    });
  }

  $(document).ready(function() {
    $('#add-picasa').click(addPicasaAlbum);
    $('#add-camlistore').click(addCamlistoreServer);
    populateAlbumList();
  });
  </script>
</head>
<body>

<h1>Clip It Good: Configure options</h1>

<div id="connected-list">
  Loading...
</div>

<div class="add-album-control">
  <button id="add-picasa" type="button">Add Picasa Web Album</button>
  <button id="add-camlistore" type="button">Add Camlistore Server</button>
</div>

<h2>Security information</h2>
<div class="security-detail">
Connecting an album to <em>Clip It Good</em> will require giving this extension permission to access your albums even when you are <strong>not logged into your account</strong>. At any time you may revoke access to this extension by using the authorized access control panel for each photo hosting provider: <a href="https://www.google.com/accounts/IssuedAuthSubTokens">Google Accounts</a>
</div>

<h2>About</h2>
<div id="about">
  <img src="icon128.png"/>
  <p>
     Brett Slatkin, &copy;2010
     <br>
    <a href="http://www.google.com/profiles/bslatkin/contactme">Email</a>
  </p>
  <p>
    Extension and source licensed under the
    <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License,
    Version 2.0</a>. Uses <a href="http://jqueryui.com/">jQuery UI</a> (MIT/GPL), 
    <a href="http://www.json.org/js.html">json2 parser</a> (public domain),
    <a href="http://code.google.com/p/javascriptbase64/">Fred Palmer's Base64</a>
    (BSD compat), and <a href="http://code.google.com/p/crypto-js/">Jeff
    Mott's SHA1</a> (BSD compat).
  </p>
</div>

<!-- hidden divs used by interactive stuff -->
<div id="select-album" style="display: none;">
  <div class="album-type"></div>
  <ol class="album-list"></ol>
  <div class="album-controls">Drag to select multiple or click while holding Control/&#x2318; for specific items.</div>
</div>

<div id="camliserver-config" style="display: none;">
  <table width="100%" border="0">
    <tr>
      <td><label for="camliserver-url">Blobserver&nbsp;URL:</label></td>
      <td><input type="text" id="camliserver-url" size="30"></td>
    </tr>
    <tr>
      <td><label for="camliserver-name">Pretty&nbsp;name:</label></td>
      <td><input type="text" id="camliserver-name" size="30"></td>
    </tr>
    <tr>
      <td><label for="camliserver-username">Username:</label></td>
      <td><input type="text" id="camliserver-username" size="30"></td>
    </tr>
    <tr>
      <td><label for="camliserver-password">Password:</label></td>
      <td><input type="text" id="camliserver-password" size="30"></td>
    </tr>
  </table>
</div>

</body>
</html>
